<script setup>
import { ref } from 'vue'
import {formatDate} from '@/utils'
import { postCustomerSendDetailUser,postCustomerSendDetailUserAlert } from '@/api'
import { toRaw } from '@vue/reactivity'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'


const dateTypeList = [
  {
  'name':'已送达'
},
  {
  'name':'发送失败'
},
]
const searchVal = ref('')
const searchStaff = ()=>{
  console.log('搜索客户')
}
const total = ref(0)
const tableData = ref()
const pageNo = ref(1)
const queryForm = ref({
	id: '',
	type:'1',
	name:'',
	page:1,
	size:10
})
const show = async (id)=>{
	queryForm.value.id = id
// queryForm.value.id = 55
  console.log(queryForm,'sdasdasd')
  getData()
}
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const getData = async()=>{
	const r = await postCustomerSendDetailUser(queryForm.value)
  if (r) {
		tableData.value = r.data.item
		total.value = r.data.count
  }
	
}
const remind = async(id) =>{
	const r = await postCustomerSendDetailUserAlert(
		{id:queryForm.value.id,
		staff_id:id
		}
	)
	if (r){
		ElMessage.success('提醒成功')
		getData()
	}
}
const emits = defineEmits(['showDetail'])
defineExpose({
  show
})


</script>
<template>
	<div>
			<div class="app-edit app-gap-block-top" style="margin-right:7px">
      <div class="app-edit-title">
				<span class="app-edit-title-words">成员详情</span>
			</div>
				<div class="app-gap-block-top" @change="getData" style="margin-left:14px">
					<el-radio-group v-model="queryForm.type" size="large">
						<el-radio-button label="1">全部成员</el-radio-button>
						<el-radio-button label="2">已发送成员</el-radio-button>
						<el-radio-button label="3">未发送成员</el-radio-button>
						<el-radio-button label="4">发送失败</el-radio-button>
					</el-radio-group>
				</div>
		
			<div class="app-edit-body">
        <div class="">
				 <div class="app-flex-2">
          <span class="app-words-2 app-flex-left"
					>共{{ total }}人
				
        </span>
					<el-input
											v-model="queryForm.name"
											class="inp-w-200"
											size="large"
											@keyup.enter="getData"
											placeholder="请输入名称后按回车"
											clearable
											suffix-icon="Search"
										/>
				
				 </div>

					<el-table
				class="app-container-radius a-mt20"
				ref="multipleTableRef"
				:data="tableData"
				style="width: 100%;height:500px;overflow: auto;"
				:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
				:cell-style="{ fontSize: '14px', padding: '20px 0' }"
      >
      <el-table-column label="" align="left">
          <template #default="scope">
					<div class="app-flex-2">
						<div class="app-flex-left">
							<el-avatar class="cho-margin" shape="square" :size="50" :src="scope.row.avatar" />
							<div class="app-gap-words-left">
							<div class="">
								<span class="">
									{{ scope.row.name}}
									<el-tag class="app-gap-words-left" :type="send_status==1?'success':send_status==2?'error':''">{{scope.row.status== 1 ? '发送成功' : scope.row.status== 2 ? '未发送' : scope.row.status== 3 ? '发送失败': ''}}</el-tag>
								</span>
								</div>
								<div class="" style="margin-top:6px">共{{scope.row.send_size }}个客户</div>
							</div>
						</div>
						<div class="app-flex-right">
						{{alert_status==1?'已提醒':""}}
						 <el-button type="primary" @click="remind(scope.row.id)" v-if="scope.row.status == 2">提醒</el-button>
						</div>
						
						</div>
          </template>
          </el-table-column>
				
				<!-- <el-table-column label="发送员工" align="left">
					<template #default="scope">
						<div class="app-words-box">
								<div class="app-flex-left">
									<MyIcon class="app-down-icon primary-font" name="Person" />
									<span class="app-gap-words-left-xs">{{ scope.row.name}}</span>
								</div>
							</div>
					</template>
        </el-table-column>
        <el-table-column label="消息送达状态" align="left">
					<template #default="scope">
						<div class="app-flex-left">
							<span class="">
								已送达
							</span>
						</div>
					</template>
				</el-table-column>
			
				<el-table-column label="发送时间" prop="createTime" align="left"> 
				<template #default="scope">
				{{formatDate(scope.row.createtime, 'yyyy-MM-dd hh:mm:ss')}}
				</template>
				

				</el-table-column>
				<el-table-column label="操作" align="right">
					<template #default="scope">
						<span class="app-primary-font app-pointer" @click="emits('showDetail',scope.row.id)">客户详情</span>
					</template>
				</el-table-column> -->
			</el-table>
			<el-pagination style="margin-top:10px;margin-bottom:10px" :current-page="queryForm.page" class="app-page" @current-change="getData" background layout="prev, pager, next" :total="total" />
      </div>
      </div>
		</div>
	</div>
</template>
<style lang="scss">
@import url('../../../../style/app-component.scss');
.el-page-header {
  display:none;
}
</style>
